<template>
  <div class="home">
     <!-- name 就是动画的名字 -->
      <transition name="my">
         <h1 v-show="active">hello Vue</h1>
      </transition>
      
      <button @click="active = !active">切换显示隐藏</button>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  data() {
    return {
        active:true,
    }
  },
  components: {
  
  }
}
</script>
<style lang="scss" scoped>
.home{
    background: steelblue;
}
// 动画以什么状态进入   从你看不到 到 看到
.my-enter{
  opacity: 0;
} 
// 动画进入后的结束状态
.my-enter-to{
    opacity: 1;
}
// 进入 - 结束  花费的时间
.my-enter-active{
    transition: all 2s linear;
}
// 动画以什么状态离开
.my-leave{
   opacity: 1;
}
// 离开到某种状态
.my-leave-to{
    opacity: 0;
}
.my-leave-active{
     transition: all 2s linear;

}



</style>


